<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{title.homepage}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->
        
        <link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>
        
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div id="scroll-container">
            <div id="scroller" class="scroller">
                <!-- first -->
                <div class="sNode1 scroll-node">
                    <div class="sNode-content row">
                        <div class="twocol"></div>
                        <h1 class="fivecol" th:text="#{homepage.scroll.first.title}"></h1>
                    </div>
                    <div class="row">
                        <div class="twocol"></div>
                        <ul class="ninecol">
                            <li th:text="#{homepage.scroll.first.content1}"></li>
                            <li th:text="#{homepage.scroll.first.content2}"></li>
                            <li th:text="#{homepage.scroll.first.content3}"></li>
                        </ul>
                    </div>
                </div>
                
                <!-- second -->
                <div class="sNode2 scroll-node">
                    <div class="sNode-content row">
                        <div class="fivecol"></div>
                        <h1 class="fivecol" th:text="#{homepage.scroll.second.title}"></h1>
                    </div>
                    <div class="row">
                        <div class="fivecol"></div>
                        <ul class="fivecol">
                            <li th:text="#{homepage.scroll.second.content1}"></li>
                            <li th:text="#{homepage.scroll.second.content2}"></li>
                        </ul>
                    </div>
                </div>
                
                <!-- third -->
                <div class="sNode3 scroll-node">
                    <div class="sNode-content row">
                        <div class="fivecol"></div>
                        <h1 class="fivecol" th:text="#{homepage.scroll.third.title}"></h1>
                    </div>
                    <div class="row">
                        <div class="fivecol"></div>
                        <ul class="fivecol">
                            <li th:text="#{homepage.scroll.third.content1}"></li>
                            <li th:text="#{homepage.scroll.third.content2}"></li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>

        <div class="feature row">
            <div class="fourcol">
                <div class="threecol">
                    <img src="images/forex.jpg" th:src="@{/images/forex.jpg}" />
                </div>
                <div class="ninecol last">
                    <h3 th:text="#{homepage.feature.title1}"></h3>
                    <p th:text="#{homepage.feature.content1}"></p>
                </div>
            </div>
            <div class="fourcol">
                <div class="threecol">
                    <img src="images/commission.jpg" th:src="@{/images/commission.jpg}"/>
                </div>
                <div class="ninecol last">
                    <h3 th:text="#{homepage.feature.title2}"></h3>
                    <p th:text="#{homepage.feature.content2}"></p>
                    <p th:text="#{homepage.feature.content21}"></p>
                </div>
            </div>
            <div class="fourcol last">
                <div class="threecol">
                    <img src="images/" th:src="@{/images/bounds.jpg}"/>
                </div>
                <div>
                    <h3 th:text="#{homepage.feature.title3}"></h3>
                    <p th:text="#{homepage.feature.content3}"></p>
                    <p th:text="#{homepage.feature.content31}"></p>
                </div>
            </div>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
